<template>
  <div>
    <a-modal
      :width="400"
      :visible="visible"
      title="二维码签约"
      centered
      @cancel="onClose"
      :footer="null"
    >
      <div class="content">
        <qrcode-vue
          :value="qrcodeUrl"
          :size="150"
          class="code"
          :id="'canvas_1'"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import QrcodeVue from "qrcode.vue";

export default defineComponent({
  name: "QrCode",
  components: { QrcodeVue },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    qrcodeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const router = useRouter();
    const route = useRoute();

    const state = reactive({});

    const onClose = () => {
      emit("close");
    };

    return {
      ...toRefs(state),
      onClose,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: center;
  //   height: 500px;
}
</style>
